<template>
	<view class="content">
		<!-- 默认 -->
		<!-- <cos-header title="导航栏组件" /> -->
		<!-- 自定义字体颜色背景 -->
		<!-- <cos-header title="导航栏组件" font-color="red" fixed background-color="pink" :background-image="backgroundImage" /> -->
		<!-- 固定 -->
		<!-- <cos-header title="导航栏组件" fixed /> -->
		<!-- 自定义返回图标 -->
		<!-- <cos-header title="导航栏组件" :home-icon="backgroundImage" /> -->
		<!-- 隐藏左右侧 返回按钮 -->
		<!-- <cos-header title="导航栏组件" :is-show-back="false" /> -->
		<!-- <cos-header title="导航栏组件" :is-show-left="false" /> -->
		<!-- <cos-header title="导航栏组件" :is-show-right="false" /> -->
		<!-- 自定义左侧搜索 -->
		<cos-header title="导航栏组件" :isShowLeft="false" :z-index="9999" :fixed="fixed" :backgroundColor="backgroundColor"
			:fontColor="fontColor">
			<input type="text"
				style="width: 200px; height:40px; border: 1px solid #efefef; border-radius: 10px;" /></cos-header>
		<image src="/static/sync_bg.jpg" mode="" style="width: 100vw;"></image>
		<button @click="goScrollPage">跳转头部滚动渐变</button>
		<div v-for="item in 100" :key="item">
			{{ item }}
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundImage: 'https://img0.baidu.com/it/u=2960283338,400984859&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1736528400&t=85b385cc73b4f82f460aaf67ae335bba',
				backgroundColor: 'transparent',
				fontColor: '#fff',
				fixed: true,
			}
		},
		methods: {
			goScrollPage() {
				uni.navigateTo({
					url: '/pages/fixed/index'
				})
			}

		}
	}
</script>

<style>

</style>